<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆调度</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">车辆调度</div>
            
            <!-- 调度概览 -->
            <div class="dispatch-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card available">
                            <div class="overview-item">
                                <div class="overview-number">{{ dispatchStats.available }}</div>
                                <div class="overview-label">可用车辆</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card dispatched">
                            <div class="overview-item">
                                <div class="overview-number">{{ dispatchStats.dispatched }}</div>
                                <div class="overview-label">已调度</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card maintenance">
                            <div class="overview-item">
                                <div class="overview-number">{{ dispatchStats.maintenance }}</div>
                                <div class="overview-label">维护中</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card efficiency">
                            <div class="overview-item">
                                <div class="overview-number">{{ dispatchStats.efficiency }}%</div>
                                <div class="overview-label">调度效率</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 调度操作区 -->
            <div class="dispatch-actions">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card header="智能配车">
                            <el-form :model="dispatchForm" label-width="100px">
                                <el-form-item label="运单号">
                                    <el-input v-model="dispatchForm.waybillNo" placeholder="请输入运单号"></el-input>
                                </el-form-item>
                                <el-form-item label="货物重量">
                                    <el-input-number v-model="dispatchForm.weight" :min="0" placeholder="吨"></el-input-number>
                                </el-form-item>
                                <el-form-item label="温度要求">
                                    <el-select v-model="dispatchForm.tempRequirement" placeholder="请选择温度要求">
                                        <el-option label="冷冻(-18°C)" value="frozen"></el-option>
                                        <el-option label="冷藏(0-4°C)" value="refrigerated"></el-option>
                                        <el-option label="保鲜(4-10°C)" value="fresh"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="运输距离">
                                    <el-input-number v-model="dispatchForm.distance" :min="0" placeholder="公里"></el-input-number>
                                </el-form-item>
                                <div style="text-align: center;">
                                    <el-button type="primary" @click="smartDispatch">智能配车</el-button>
                                </div>
                            </el-form>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card header="配车结果">
                            <div v-if="recommendedVehicles.length > 0">
                                <div v-for="vehicle in recommendedVehicles" :key="vehicle.id" class="vehicle-recommendation">
                                    <el-row :gutter="10">
                                        <el-col :span="16">
                                            <div><strong>{{ vehicle.plateNo }}</strong> - {{ vehicle.model }}</div>
                                            <div style="color: #666; font-size: 12px;">载重: {{ vehicle.capacity }}吨 | 司机: {{ vehicle.driver }}</div>
                                            <div style="color: #666; font-size: 12px;">匹配度: {{ vehicle.matchScore }}%</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button size="mini" type="primary" @click="assignVehicle(vehicle)">分配</el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div v-else style="text-align: center; color: #999; padding: 50px 0;">
                                请先进行智能配车
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 车辆状态表 -->
            <div class="vehicle-status">
                <el-card header="车辆状态管理">
                    <div style="margin-bottom: 15px;">
                        <el-button type="success" @click="batchSchedule">批量排班</el-button>
                        <el-button type="warning" @click="capacityAnalysis">运力分析</el-button>
                        <el-button @click="refreshVehicleStatus">刷新状态</el-button>
                    </div>
                    <el-table :data="vehicleList" border>
                        <el-table-column prop="plateNo" label="车牌号" width="120"></el-table-column>
                        <el-table-column prop="model" label="车型" width="150"></el-table-column>
                        <el-table-column prop="capacity" label="载重(吨)" width="100"></el-table-column>
                        <el-table-column prop="driver" label="司机" width="120"></el-table-column>
                        <el-table-column prop="status" label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="getVehicleStatusType(scope.row.status)">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="currentLocation" label="当前位置" width="180"></el-table-column>
                        <el-table-column prop="nextMaintenance" label="下次保养" width="120"></el-table-column>
                        <el-table-column prop="workHours" label="本月工时" width="100"></el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                            <template slot-scope="scope">
                                <div class="operation-buttons">
                                    <el-button size="mini" @click="viewVehicleDetail(scope.row)" class="btn-detail">详情</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>

            <!-- 排班计划 -->
            <div class="schedule-plan">
                <el-card header="排班计划">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-date-picker
                                v-model="scheduleDate"
                                type="week"
                                format="yyyy 第 WW 周"
                                placeholder="选择周次">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="8">
                            <el-select v-model="scheduleFilter" placeholder="筛选条件">
                                <el-option label="全部车辆" value="all"></el-option>
                                <el-option label="仅空闲车辆" value="available"></el-option>
                                <el-option label="仅在途车辆" value="dispatched"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="primary" @click="generateSchedule">生成排班</el-button>
                            <el-button @click="exportSchedule">导出排班表</el-button>
                        </el-col>
                    </el-row>
                    
                    <div class="schedule-table" style="margin-top: 20px;">
                        <el-table :data="scheduleData" border>
                            <el-table-column prop="plateNo" label="车牌号" width="120"></el-table-column>
                            <el-table-column prop="driver" label="司机" width="100"></el-table-column>
                            <el-table-column prop="monday" label="周一" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.monday)">{{ scope.row.monday }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="tuesday" label="周二" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.tuesday)">{{ scope.row.tuesday }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wednesday" label="周三" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.wednesday)">{{ scope.row.wednesday }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="thursday" label="周四" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.thursday)">{{ scope.row.thursday }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="friday" label="周五" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.friday)">{{ scope.row.friday }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="saturday" label="周六" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.saturday)">{{ scope.row.saturday }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sunday" label="周日" width="120">
                                <template slot-scope="scope">
                                    <span :class="getScheduleClass(scope.row.sunday)">{{ scope.row.sunday }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    dispatchStats: {
                        available: 25,
                        dispatched: 18,
                        maintenance: 3,
                        efficiency: 92
                    },
                    dispatchForm: {
                        waybillNo: '',
                        weight: 0,
                        tempRequirement: '',
                        distance: 0
                    },
                    recommendedVehicles: [],
                    vehicleList: [
                        {
                            plateNo: '湘D·12345',
                            model: '东风天锦冷藏车',
                            capacity: 12,
                            driver: '张师傅',
                            status: '空闲',
                            currentLocation: '衡阳蒸湘配送中心',
                            nextMaintenance: '2024-02-15',
                            workHours: 156
                        },
                        {
                            plateNo: '湘D·67890',
                            model: '解放J6冷藏车',
                            capacity: 8,
                            driver: '李师傅',
                            status: '在途',
                            currentLocation: '衡炎高速衡阳段',
                            nextMaintenance: '2024-02-20',
                            workHours: 178
                        },
                        {
                            plateNo: '湘D·11111',
                            model: '福田欧马可',
                            capacity: 5,
                            driver: '王师傅',
                            status: '维护中',
                            currentLocation: '衡阳雁峰维修厂',
                            nextMaintenance: '进行中',
                            workHours: 125
                        },
                        {
                            plateNo: '湘D·33333',
                            model: '江铃冷藏车',
                            capacity: 6,
                            driver: '陈师傅',
                            status: '空闲',
                            currentLocation: '衡阳珠晖区',
                            nextMaintenance: '2024-03-10',
                            workHours: 142
                        },
                        {
                            plateNo: '湘D·88888',
                            model: '庆铃冷藏车',
                            capacity: 4,
                            driver: '刘师傅',
                            status: '在途',
                            currentLocation: '衡阳南岳区',
                            nextMaintenance: '2024-02-28',
                            workHours: 165
                        }
                    ],
                    scheduleDate: '',
                    scheduleFilter: 'all',
                    scheduleData: [
                        {
                            plateNo: '湘D·12345',
                            driver: '张师傅',
                            monday: '衡阳→长沙',
                            tuesday: '长沙→岳阳',
                            wednesday: '岳阳→广州',
                            thursday: '广州→深圳',
                            friday: '深圳→衡阳',
                            saturday: '休息',
                            sunday: '休息'
                        },
                        {
                            plateNo: '湘D·67890',
                            driver: '李师傅',
                            monday: '休息',
                            tuesday: '衡阳→郵阳',
                            wednesday: '郵阵→永州',
                            thursday: '永州→怀化',
                            friday: '怀化→衡阳',
                            saturday: '衡阳市内配送',
                            sunday: '衡阳市内配送'
                        },
                        {
                            plateNo: '湘D·33333',
                            driver: '陈师傅',
                            monday: '衡阳市内配送',
                            tuesday: '衡阳市内配送',
                            wednesday: '衡阳→祁东',
                            thursday: '祁东→衡阳',
                            friday: '衡阳市内配送',
                            saturday: '休息',
                            sunday: '休息'
                        }
                    ]
                }
            },
            methods: {
                smartDispatch() {
                    if (!this.dispatchForm.waybillNo) {
                        this.$message.error('请输入运单号');
                        return;
                    }
                    
                    // 模拟智能配车逻辑
                    this.recommendedVehicles = [
                        {
                            id: 1,
                            plateNo: '湘D·12345',
                            model: '东风天锦冷藏车',
                            capacity: 12,
                            driver: '张师傅',
                            matchScore: 95
                        },
                        {
                            id: 2,
                            plateNo: '湘D·33333',
                            model: '江铃冷藏车',
                            capacity: 6,
                            driver: '陈师傅',
                            matchScore: 88
                        }
                    ];
                    
                    this.$message.success('智能配车完成');
                },
                assignVehicle(vehicle) {
                    this.$confirm(`确认将车辆 ${vehicle.plateNo} 分配给运单 ${this.dispatchForm.waybillNo} 吗？`, '确认分配', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('车辆分配成功');
                        this.recommendedVehicles = [];
                    }).catch(() => {
                        this.$message.info('已取消分配');
                    });
                },
                getVehicleStatusType(status) {
                    const typeMap = {
                        '空闲': 'success',
                        '在途': 'primary',
                        '维护中': 'warning',
                        '故障': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                viewVehicleDetail(row) {
                    this.$message.info('查看车辆详情：' + row.plateNo);
                },
                scheduleVehicle(row) {
                    this.$message.success('车辆 ' + row.plateNo + ' 已加入调度队列');
                },
                maintenanceVehicle(row) {
                    this.$confirm('确认安排车辆 ' + row.plateNo + ' 进行保养吗？', '保养确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        row.status = '维护中';
                        this.$message.success('保养安排成功');
                    });
                },
                batchSchedule() {
                    this.$message.success('批量排班完成');
                },
                capacityAnalysis() {
                    this.$message.info('运力分析报告生成中...');
                },
                refreshVehicleStatus() {
                    this.$message.success('车辆状态已刷新');
                },
                generateSchedule() {
                    this.$message.success('排班计划已生成');
                },
                exportSchedule() {
                    this.$message.success('排班表导出成功');
                },
                getScheduleClass(schedule) {
                    if (schedule === '休息') return 'schedule-rest';
                    if (schedule.includes('→')) return 'schedule-work';
                    return '';
                }
            }
        });
    </script>

    <style scoped>
        .dispatch-overview {
            margin-bottom: 20px;
        }
        
        .overview-card {
            text-align: center;
            cursor: pointer;
        }
        
        .overview-card.available {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.dispatched {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.maintenance {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.efficiency {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-number {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin-top: 5px;
        }
        
        .dispatch-actions {
            margin-bottom: 20px;
        }
        
        .vehicle-recommendation {
            padding: 10px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .vehicle-status {
            margin-bottom: 20px;
        }
        
        .schedule-plan {
            margin-bottom: 20px;
        }
        
        .schedule-work {
            color: #409EFF;
            font-weight: bold;
        }
        
        .schedule-rest {
            color: #909399;
        }
        
        /* 操作按钮样式优化 */
        .operation-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .operation-buttons .el-button {
            min-width: 56px;
            padding: 5px 12px;
            font-size: 12px;
        }
        
        .btn-detail {
            background-color: #409EFF;
            border-color: #409EFF;
            color: #fff;
        }
        
        .btn-detail:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
            color: #fff;
        }
        
        /* 保证表格操作列的一致性 */
        .el-table .cell {
            text-align: center;
        }
    </style>
</body>
</html>